<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>word-break</title>

        <style type="text/css">
            .wrapper {
                border: 1px solid blue ;
                width: 240px ;
                height: 100px ;
                margin: 15px auto ;
            }

            .first { word-break: normal ; }
            .second { word-break: break-all ; }
            .third { word-break: keep-all ; }
        </style>

    </head>
    <body>

        <div class="wrapper first">
            The universal selector is a special type selector, that represents an element of any element type.
        </div>

        <div class="wrapper second">
            The universal selector is a special type selector, that represents an element of any element type.
        </div>

        <div class="wrapper third">
            The universal selector is a spe-cial type selector, that represents an element of any element type.
        </div>
        
    </body>
</html>